<template>
  <div class="new_coupon">
    <c-title :hide="false" text="我的优惠券"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" color="#F15353" @change="onChange">
      <van-tab title="待使用"></van-tab>
      <van-tab title="已过期"></van-tab>
      <van-tab title="已使用"></van-tab>
    </van-tabs>
    <div class="topNavBox" v-if="coupon_type.length > 0">
      <div class="tapNavList">
        <div class="tapNavLis" :class="[status == item.id ? 'isr' : '']" v-for="(item, index) in coupon_type" :key="index" @click="tapNav(item.id)">{{ item.name }}</div>
      </div>
      <div class="tapNavList" style="margin-top: 0.66rem;">
        <template v-if="status == 1 && coupon_type && coupon_type[0].child">
          <div class="tapNavLis" :class="[child_status == item.id ? 'isr' : '']" v-for="(item, index) in coupon_type[0].child" :key="index" @click="tapNavChild(item.id)">{{ item.name }}</div>
        </template>
      </div>
    </div>
    <div class="coupon_list">
      <div class="lis_cloum" v-for="item in coupon_list" :key="item.id" @click="toDetail(item.id)">
        <div class="lis">
          <div class="posbg" v-if="active == 0 && !item.is_bind_car && item.coupon && !item.coupon.coupon_restrict"></div>
          <div class="buttonPos" @click.stop="to_carNumber(item.id)" v-if="active == 0 && !item.is_bind_car && item.coupon && !item.coupon.coupon_restrict">绑定车牌号</div>
          <div class="lis_l">
            <template v-if="item.coupon.discount_rule_str">
              <div class="lis_l_t">
                <span class="small" v-if="item.coupon.discount_rule_str.is_price">¥</span>
                {{ item.coupon.discount_rule_str.discount }}
                <span class="small" v-if="item.coupon.discount_rule_str.is_rebate">折</span>
              </div>
              <div class="lis_l_b">{{ item.coupon.discount_rule_str.desc }}</div>
            </template>
          </div>
          <div class="lis_r" v-if="item.coupon">
            <div class="lis_r_title">{{ item.coupon.coupon_name }}</div>
            <div class="list_r_type">{{ item.coupon.coupon_type_name }}</div>
            <div class="list_r_time">{{ item.validity_period }}</div>
          </div>
        </div>
        <div class="lis_bottom" v-if="item.car">仅限{{ item.car.license_no }}可用</div>
      </div>
      <van-empty image="search" description="暂无更多" v-if="coupon_list.length <= 0" />
    </div>
    <div class="posImg">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/new_coupon%2Fdh%402x.png" @click="to_exchange" alt="" v-if="exchange" />
      <!-- <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/new_coupon%2Fms%402x.png" alt="" @click="to_flash_sale" v-if="flash_sale" /> -->
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "0",
      status: 1,
      child_status: "",
      coupon_type: [],
      exchange: 0, //兑换入口
      flash_sale: 0, //秒杀入口
      coupon_list: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    toDetail(id) {
      this.$router.push(this.fun.getUrl("new_coupon_detail", { id: id }));
    },
    // to_flash_sale(){
    //   this.$router.push(this.fun.getUrl("flashsale", { }));
    // },
    to_carNumber(id) {
      this.$router.push(this.fun.getUrl("carNumber", { id: id }));
    },
    onChange() {
      this.coupon_list = [];
      this.getData();
    },
    to_exchange() {
      this.$router.push(this.fun.getUrl("new_coupon_exchange", {}));
    },
    tapNavChild(id) {
      this.child_status = id;
      this.coupon_list = [];
      this.getList();
    },
    tapNav(id) {
      this.status = id;
      this.child_status = "";
      this.coupon_list = [];
      for (let i = 0; i < this.coupon_type.length; i++) {
        if (this.coupon_type[i].id == this.status) {
          if (this.coupon_type[i].child && this.coupon_type[i].child.length > 0) {
            this.child_status = this.coupon_type[i].child[0].id;
            break;
          }
        }
      }
      this.getList();
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.index", {}, "");
      if (result) {
        this.coupon_type = data.coupon_type;
        this.status = this.coupon_type[0].id;
        this.flash_sale = data.flash_sale;
        this.exchange = data.exchange;
        for (let i = 0; i < this.coupon_type.length; i++) {
          if (this.coupon_type[i].id == this.status) {
            if (this.coupon_type[i].child && this.coupon_type[i].child.length > 0) {
              this.child_status = this.coupon_type[i].child[0].id;
              break;
            }
          }
        }
        this.getList();
      } else {
        this.$toast(msg);
      }
    },
    async getList() {
      let json = {
        status: this.active,
        parent_coupon_type: this.status,
        coupon_type: this.child_status
      };
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.get-list", json, ".");
      if (result) {
        console.log(data);
        this.coupon_list = data.list.data;
        this.total_page = data.list.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.page = 1;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          status: this.active,
          parent_coupon_type: this.status,
          coupon_type: this.child_status
        };
        let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.get-list", json, ".");
        this.isLoadMore = true;
        if (result) {
          this.coupon_list = this.coupon_list.concat(data.list.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.posImg {
  position: fixed;
  bottom: 7.09rem;
  right: 1.13rem;
  width: 3.75rem;
  img {
    width: 100%;
    height: auto;
  }
}
.coupon_list {
  padding: 0 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 3rem;
  .lis_cloum {
    position: relative;
    background: #ffffff;
    border-radius: 0.63rem;
    margin-top: 0.63rem;
    .lis_bottom {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      background: #ffffff;
      padding: 0 0.63rem;
      text-align: left;
      border-radius: 0 0 0.63rem 0.63rem;
      font-size: 0.75rem;
      color: #aaaab3;
    }
    .lis {
      position: relative;
      padding: 0.53rem 0;
      box-sizing: border-box;
      background: #ffffff;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      box-shadow: 0rem 0.19rem 0.47rem 0.03rem #f0f0f1;
      border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
      .buttonPos {
        position: absolute;
        z-index: 1;
        top: 1.8rem;
        left: 8rem;
        width: 5.88rem;
        height: 2rem;
        background: #f15353;
        border-radius: 1rem 1rem 1rem 1rem;
        text-align: center;
        line-height: 2rem;
        font-weight: 500;
        font-size: 0.88rem;
        color: #ffffff;
      }
      .lis_l {
        width: 6.88rem;
        border-right: 1px dashed #d6d6dc;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .lis_l_t {
          font-size: 1.5rem;
          font-weight: bold;
          color: #ec2b2b;
          .small {
            font-size: 0.7rem;
          }
        }
        .lis_l_b {
          font-size: 0.75rem;
          color: #ec2b2b;
        }
      }
      .lis_r {
        flex: 1;
        padding: 0 0.72rem;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .lis_r_title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .list_r_type {
          flex-shrink: 0;
          padding: 0 0.22rem;
          height: 1.13rem;
          line-height: 1.13rem;
          border-radius: 0.31rem;
          background: #fef1f1;
          font-size: 0.75rem;
          color: #ec2b2b;
          margin-top: 0.28rem;
        }
        .list_r_time {
          font-size: 0.75rem;
          color: #6e6e79;
          text-align: left;
          margin-top: 0.28rem;
        }
      }
    }
    .lis::after {
      content: "";
      position: absolute;
      width: 0.5rem;
      height: 0.5rem;
      left: 6.6rem;
      top: -0.2rem;
      background: #000;
      border-radius: 50%;
      // border: 0.03rem solid var(--wlborder);
      background: #f0f0f1;
    }
    .lis::before {
      content: "";
      position: absolute;
      width: 0.5rem;
      height: 0.5rem;
      left: 6.6rem;
      bottom: -0.2rem;
      background: #000;
      border-radius: 50%;
      // border: 0.03rem solid var(--wlborder);
      background: #f0f0f1;
      z-index: 1;
    }
    .posbg {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.5;
    }
  }
  .lis_cloum:first-child {
    margin-top: 0.94rem;
  }
}
.topNavBox {
  padding: 0.75rem 0.94rem 0.34em 0.94rem;
  .tapNavList {
    display: flex;
    align-items: center;
    overflow-x: scroll;
    .tapNavLis {
      flex-shrink: 0;
      height: 1.75rem;
      padding: 0 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-radius: 0.94rem;
      font-size: 0.81rem;
      background: #ffffff;
      margin-right: 0.63rem;
      // margin-bottom: 0.66rem;
    }
    .isr {
      color: #f15353;
      border: 0.03rem solid #f15353;
      background: #f5e4e4;
    }
  }
}
</style>
